<template>
	<div class="labelTable" v-show="labelTable">
		<p>{{labelTitle}}</p>
		<a class="labelClose" @click="labelClose">&#10005;</a>
		<div class="label_table">
			<div class="el-tabs-report">
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_2" v-if="this.$parent.transitionType!=6||this.$parent.transitionType!=-1"></el-cascader>
				<el-select v-model="permission" @change="getTableList" class="th_2" v-if="this.$parent.transitionType==6||this.$parent.transitionType!=-1">
					<el-option label="筛选分类" value=""></el-option>
					<el-option v-for="item in permissionArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<div class="msearch">
					<input placeholder="请输入关键词..." v-model="search"/>
					<a @click="getTableList"><img src="../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="courseName" label="课程名称"v-if="this.$parent.transitionType==1"></el-table-column>
				<el-table-column prop="courseName" label="直播课程名称"v-if="this.$parent.transitionType==5"></el-table-column>
				<el-table-column prop="courseName" label="知识地图课件名称"v-if="this.$parent.transitionType==6"></el-table-column>
				<el-table-column prop="courseName" label="新闻标题"v-if="this.$parent.transitionType==2"></el-table-column>
				<el-table-column prop="title" label="活动讲座标题" v-if="this.$parent.transitionType==-1"></el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<a @click="labelSubmit" class="labelSubmit">确定</a>
	</div>
</template>

<script>
	export default{
		prop:['LabelsIds','LabelsNames'],
		data(){
			return{
				labelTable:false,
				labelTitle:'',
				labelData:[],
				chooseLabelsIds:[],
				chooseLabelsNames:[],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                },
				searchSelect:'',
				permission:'',
				permissionArr:[],
				search:'',
				tableData:[],
				pagesize:15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods:{
			getTableList() {
				if(this.$parent.transitionType==1){
					this.labelTitle='添加课程';
					let columnType = [1];
					this.$rootFunction().columnList({columnType});
					var s={
					    page: this.currentpage,
						num: this.pagesize,
						fuzzyFields: this.search,
						courseWatchPer:'',
						rootcompanyid:1,
						courseType:1
	                };
					if(this.searchSelect!=null && this.searchSelect.length >= 2){
	                	s.courseColumnYi = this.searchSelect[0];
						s.courseColumn = this.searchSelect[1];
	                };
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/kcCourse/selectKcCourseListV2",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: s,
						success: res => {
							if(res.data.code == 200) {
								this.tableData = res.data.data.pageList.list;
								this.total=res.data.data.pageList.pageParam.items;
								this.getIds();
							}
						}
					});
				}else if(this.$parent.transitionType==5){
					this.labelTitle='添加直播';
					let columnType = [5];
					this.$rootFunction().columnList({columnType});
					this.$ajax({
						url: this.$root.jifuUrl + "/getLiveBroadcastCoursePage?"+'page='+this.currentpage+'&num='+ this.pagesize+'&name='+this.search+'&columnid='+this.searchSelect +'&rootcompanyid=1',
						method: 'GET',
						data: {},
						success: res => {
							if(res.data.code == 200) {
								this.tableData = res.data.data.list;
								this.total=res.data.data.pageParam.items;
								this.getIds();
							}
						}
					});
				}else if(this.$parent.transitionType==6){
					this.labelTitle='添加知识地图';
					let tagType = 6;
					this.$rootFunction().tagType({tagType});
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/quanzi/getQuanziCoursePage",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: {
							page:this.currentpage,
							num:this.pagesize,
							rootcompanyid:1,
							name:this.search,
							knowledgeMapTypeId:this.permission
						},
						success: res => {
							if(res.data.code == 200) {
								this.tableData = res.data.data.list;
								this.total=res.data.data.pageParam.items;
								this.getIds();
							}
						}
					});
				}else if(this.$parent.transitionType==2){
					this.labelTitle='添加图文资讯';
					let columnType = [2];
					this.$rootFunction().columnList({columnType});
					var s={
					    page: this.currentpage,
						num: this.pagesize,
						fuzzyFields: this.search,
						rootcompanyid:1,
						courseType:2
	                };
					if(this.searchSelect!=null){
	                	s.courseColumnYi = this.searchSelect[0];
						s.courseColumn = this.searchSelect[1];
	                };
					this.$ajax({
						url: this.$root.jifuUrl + "/mns/kcCourse/selectKcCourseList",
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data: s,
						success: res => {
							if(res.data.code == 200) { 
								this.tableData = res.data.data.list;
								this.total=res.data.data.pageParam.items;
								this.getIds();
							}
						}
					})
				}else if(this.$parent.transitionType=-1){
					this.labelTitle='添加活动讲座';
					this.$ajax({
						url: this.$root.jifuUrl + "/getActivityLecturePage?"+'page='+this.currentpage+'&num='+this.pagesize+'&name='+this.search+'&rootcompanyid=1',
						method: 'GET',
						data: {},
						success: res => {
							if(res.data.code == 200) {
								this.tableData = res.data.data.list;
								this.total=res.data.data.pageParam.items;
								this.getIds();
							}
						}
					});
				}
            },
			getIds(){
				if(this.$parent.nowType=='edit'){
					setTimeout(() => {
					　　 this.rowMultipleChecked();
					}, 200)
				}
			},
			rowMultipleChecked(){
				var selectPeoples=[];
				if(this.$parent.LabelsIds!=''){
					selectPeoples.push(this.$parent.LabelsIds)
				};
				this.tableData.forEach(element => {
					if(selectPeoples.indexOf(element.id)>=0){
						this.$refs.multipleTable.toggleRowSelection(element);
					}
				})
			},
			labelClose(){
				this.labelTable=false;
				this.$parent.transitionType = 1;
			},
			handleSelectionChange(val) {
				for(var i = 0;i<val.length;i++){
					this.chooseLabelsIds = val[i].id;
					this.chooseLabelsNames = val[i].courseName;
				}
			},
			labelSubmit(){
				if(this.chooseLabelsIds.length>1){
					alert('只允许选择一个课程！');
				}else{
					this.labelTable=false;
					this.LabelsIds = this.chooseLabelsIds;
					this.LabelsNames = this.chooseLabelsNames;
					this.$emit('labelNamesChanges',{'arg1':this.LabelsIds,'arg2':this.LabelsNames});
				}
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	}
		}
	}
</script>

<style>
	.labelTable{width: 700px;height: 551px;background: #fff;border: 1px solid #ccc;position: fixed;top: 50%;left: 50%;margin-top: -250px;margin-left: -270px;z-index: 9999;border-radius: 10px;padding: 20px;box-sizing: border-box;font-size: 14px;overflow-x: hidden;} 
    .labelTable p{font-size: 16px;color: #333;}
    .labelTable .labelClose{width: 15px;height: 15px;position: absolute;top: 20px;right: 20px;cursor: pointer;}
    .labelTable .labelSubmit{width: 100px;height: 34px;line-height: 34px;display:block;font-size: 14px;background: #44CEF6;color:#fff;border-radius: 4px;text-align: center;cursor: pointer;margin: 72px auto 0;}
    .labelTable .tableFlex{margin-top: 20px;height: 338px;overflow-x: hidden;}
    .labelTable .tableFlex .el-table{width: 50%;float: left;box-sizing: border-box;}
</style>